<template>
	<view class="car-item">
		<image class="carPhoto" :src="cartInfo.cartImg?cartInfo.cartImg:cartInfo.img" mode="aspectFill"></image>
		<view class="carInfo" :class="select ? 'carInfoW':''">
			<view class="carNo">车牌号：{{cartInfo.licensePlate}}</view>
			<view class="carType">车型：{{cartInfo.cartType}}</view>
			<view class="carColor">颜色：{{cartInfo.cartColor}}</view>
			<button v-if="isCx" class="cxBtn" @click="$emit('again')" type="default">重选</button>
		</view>
		<uni-icons v-if="select" class="icon-select" :type="isActive?'circle-filled':'circle'" :color="isActive?'#02B1AA':'#E6E6E6'" size="20"></uni-icons>
	</view>
</template>

<script>
	export default {
		name:"car-item",
		props:{
			cartInfo:{
			   type:Object,
			   default:()=>{
				   return {}
			   }
			},
			select:{
				type:Boolean,
				default:false
			},
			isCx:{
				type:Boolean,
				default:false
			},
			isActive:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
  .car-item{
	  width: 100%;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  .carPhoto{
		  width: 200rpx;
		  height: 200rpx;
		  padding: 40rpx;
	  }
	  .carInfo{
		  color: #2A2B2B;
		  font-size: 28rpx;
		  line-height: 60rpx;
		  margin-top: 0rpx;
		  width: calc(100% - 300rpx);
		  position: relative;
	  }
	  .cxBtn{
		  position: absolute;
		  bottom: 0rpx;
		  right: 0rpx;
		  width: 144rpx;
		  height: 64rpx;
		  color: #fff;
		  background: #02B1AA;
		  font-size: 28rpx;
	  }
	  .carInfoW{
		  width: calc(100% - 360rpx);
	  }
	  .icon-select{
		  width: 40rpx;
		  text-align: center;
		  // .uni-icons uniui-circle-filled{
			 // color: #02B1AA !important; 
		  // }
		  
	  }
  }
</style>